---
import { SITE } from "$/config";
import SvgIcon from "./SvgIcon.astro";
import ModeSwitcherBtn from "./ModeSwitcherBtn.svelte";
import SearchBtn from "./SearchBtn.svelte";
---

<header class="header">
  <div class="header__logo">
    <a href="/" class="avatar">
      <img class="header__logo-img" src="/assets/logo.png" alt="Astro logo" />
    </a>
  </div>
  <div class="header__meta flex-1">
    <h2 class="header__title">
      <a href="/">{SITE.name}</a>
    </h2>
    <div class="header__meta-more flex">
      <p class="header__desc">
        {SITE.description}
      </p>
      <nav class="header__nav flex">
        <ul class="header__ref-list">
          <li>
            <SearchBtn client:visible />
          </li>
          <li>
            <a href={SITE.githubUrl} title={`${SITE.name}'s Github URL'`}>
              <SvgIcon>
                <path
                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
                ></path>
              </SvgIcon>
            </a>
          </li>
          <li>
            <a href="/rss.xml" title="RSS">
              <SvgIcon>
                <path d="M4 11a9 9 0 0 1 9 9"></path>
                <path d="M4 4a16 16 0 0 1 16 16"></path>
                <circle cx="5" cy="19" r="1"></circle>
              </SvgIcon>
            </a>
          </li>
          <li>
            <ModeSwitcherBtn client:visible />
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<style>
  .header {
    @apply flex gap-4 border-b py-3 /* border-gray-200 dark:border-gray-700 - check styles/global.css */;
  }
  .header__logo-img {
    @apply w-20 h-20 overflow-hidden;
  }
  .header__title {
    @apply text-4xl font-extrabold md:text-5xl text-theme-primary dark:text-theme-dark-primary;
  }
  .header__desc {
    @apply text-xl flex-1 dark:text-gray-200;
  }
  .header__ref-list {
    @apply flex gap-3 text-gray-400;
  }
</style>
